<template>
	<view class="content" style='background-color: aliceblue;'>
		<view class="content_data">

			<view style="display: flex;justify-content: space-between;height: 13vh;">
				<view style="display: flex;flex-direction: column;justify-content: space-between;width: 70%;">
					<view style="font-weight: 700;color: red;font-size: 35rpx;">{{user_info.companyName}}</view>
					<view @click="phone_btn(user_info.headPhone)"
						style="font-weight: 700;color: red;font-size: 35rpx;color: #3c9cff;text-decoration: underline;">
						{{user_info.headName+'-'+user_info.headPhone}}
					</view>
					<view v-if="companyNum_off == 2"><u-button open-type="share" type="success">我要分享</u-button>
					</view>
					<view style="display: flex;">
						<view style="width: 49%; " v-if="companyNum_off == 1"><u-button @click="car_btn"
								type="warning">我要用车</u-button></view>
						<view style="width: 49%; margin-left: 2%;" v-if="companyNum_off == 1">
							<u-button @click="go_car_btn" type="success">成为车队</u-button>
						</view>
					</view>
				</view>
				<view style="display: flex;flex-direction: column;align-items: center;font-weight: 700;width: 30%;">
					<view>加微信</view>
					<view v-if="user_info.personalQrcodeUrl != ''">
						<u-image :show-menu-by-longpress="true" :src="user_info.personalQrcodeUrl" @click="previewImage"
							width="160" height="160" mode="aspectFill"></u-image>
					</view>
					<view v-else style="width: 200rpx;font-size: 25rpx;font-weight: 400;">
						没有微信二维码图片请先在【我的-修改账号信息】上传微信二维码
					</view>
				</view>
			</view>

			<u-divider half-width="200" height='80'>汽车信息</u-divider>
			<view style="margin-top: 20rpx;display: flex;flex-wrap: wrap;">
				<view style="font-weight: 700;width: 160rpx;">车辆品牌:</view>
				<view style="margin-left: 10rpx;color: #2979ff;width: 450rpx;">{{deilt_data.vehicleBrand }}</view>
			</view>
			<view style="margin-top: 20rpx;display: flex;flex-wrap: wrap;">
				<view style="font-weight: 700;width: 160rpx;">车辆配置:</view>
				<view style="margin-left: 10rpx;color: #2979ff;width: 450rpx;">
					【{{deilt_data.seats }}座】{{deilt_data.vehicleConfig }}</view>
			</view>
			<view style="margin-top: 20rpx;display: flex;flex-wrap: wrap;">
				<view style="font-weight: 700;width: 160rpx;">车辆团期:</view>

				<view style="color: #2979ff;width: 450rpx;" v-if="deilt_data.periodDate">

					<view style="display: flex;justify-content: space-between;">

						<view style="width: 200rpx;" v-if="companyNum_off == 2">
							<u-button size="medium" @click="go_tuanqi(deilt_data.periodDate2)"
								type="primary">查看团期</u-button>
						</view>
						<view style="width: 200rpx;">
							<u-button size="medium" @click="go_kongqi(deilt_data.periodDate3)"
								type="warning">查看空期</u-button>
						</view>
					</view>
				</view>
				<view style="margin-left: 10rpx;color: red;width: 450rpx;" v-else>
					长期空期
				</view>

			</view>
			<view style="margin-top: 20rpx;display: flex;flex-wrap: wrap;">
				<view style="font-weight: 700;width: 160rpx;">车辆说明:</view>
				<view style="margin-left: 10rpx;color: #2979ff;width: 450rpx;">{{deilt_data.vehicleExplain }}</view>
			</view>

			<u-divider half-width="200" height='80'>汽车图片</u-divider>
			<view style="margin-top: 8rpx;" v-for="item in urls" :key="item">
				<u-image :previewFullImage='true' :show-loading="true" :src="item" width="85vw" height="30vh"
					mode="aspectFill"></u-image>
			</view>






		</view>

		<!-- 下单 -->


		<u-popup v-model="car_off" mode="center" border-radius="14" :mask-close-able='false' closeable='true'
			@close="car_close">
			<view style="width: 600rpx;height: 250rpx;padding: 30rpx 30rpx;">
				<view style="text-align: center;font-weight: 700;font-size: 35rpx;">我要用车</view>
				<view style="display: flex;justify-content: space-between;margin-top: 40rpx;">

					<view style="width: 250rpx;">
						<u-button @click="go_adupTravelAdviceFollow" type="warning">旅游行程包车咨询</u-button>
					</view>
					<view style="width: 250rpx;">
						<u-button @click="go_order" type="primary">接送机火车下单</u-button>
					</view>
				</view>
			</view>
		</u-popup>

		<view @click="recognition_off_btn" v-if='companyNum_off == 1' class="recognition_css">
			<view>跳转</view>
			<view>列表</view>
		</view>

		<!-- 日历 -->

		<wu-calendar cancelColor='#fff' :useToday="true" slideSwitchMode="vertical" :monthShowCurrentMonth="true"
			:startDate="minDate" :endDate="maxDate" color='#fc5531' operationPosition='bottom' :disabledChoice='true'
			ref="wucalendar" :insert="false" mode="multiple" :date="defaultDate_list">
		</wu-calendar>




	</view>
</template>

<script>
	export default {

		data() {
			return {
				luser: {},
				id: '',
				userId: '',
				companyNum: '',
				companyNum_off: 2,
				deilt_data: {},
				vehicleConfig_text: '',
				user_info: {},
				albumWidth: 0,
				urls: [],
				car_off: false,
				tuanqi_title: '',
				defaultDate_list: [],
				defaultDate: null,
				minDate: null,
				maxDate: null,
				periodDate_off: false,
			}
		},

		onShareAppMessage(res) {
			let that = this
			let luser = uni.getStorageSync('LUSER')


			let userId2 = that.userId
			that.defaultDate = Date.now()
			that.datetime_value = Date.now()
			that.minDate = new Date().toISOString().split('T')[0];
			let today = new Date();
			today.setMonth(today.getMonth() + 1);
			that.maxDate = today.toISOString().split('T')[0];

			if (luser) {
				if (luser.userId == that.userId) {
					if (luser.userIdOfCompany) {
						userId2 = that.luser.userIdOfCompany
					} else {
						userId2 = that.luser.userId
					}
				} else {
					userId2 = that.userId
				}
			} else {
				userId2 = that.userId
			}
			return {
				title: that.user_info.companyName + that.deilt_data.vehicleBrand + '(' + that.deilt_data.seats +
					'座' + that.deilt_data
					.vehicleConfig + ')' + '欢迎各位客户调用！',
				type: 0,
				path: '/my-man/my_car/delite?companyNum=' + that.companyNum + '&userId=' + userId2 +
					'&id=' + that.id,
				mpPath: '/my-man/my_car/delite?companyNum=' + that.companyNum + '&userId=' + userId2 +
					'&id=' + that.id,

				success: (res) => {
					console.log(res, '222')
				},

				fail: (res) => {
					console.log(res, '222')
				},
			}

		},
		onLoad(e) {


		},
		onLoad(e) {
			let that = this
			that.luser = uni.getStorageSync('LUSER')
			if (e.companyNum) {
				that.companyNum_off = 1
				that.companyNum = e.companyNum
				that.userId = e.userId
				that.$u.api.findMiniProgramInfoNoLogin({
					userId: e.userId,
				}).then(res => {
					that.user_info = res.data
					that.user_info.personalQrcodeUrl = 'https://cba360.com' + that.user_info.personalQrcodeUrl

				})
			} else {

				that.id = e.id
				let luser = uni.getStorageSync('LUSER')
				that.companyNum = luser.companyNum
				that.companyNum_off = 2

				that.userId = luser.userId
				that.$u.api.findMiniProgramInfo({
					userId: luser.userId,
				}).then(res => {
					that.user_info = res.data
					that.user_info.personalQrcodeUrl = 'https://cba360.com' + that.user_info.personalQrcodeUrl

				})
			}


			that.$u.api.getSeatsTeamPeriodById({
				id: e.id
			}).then(res => {
				if (res.code == 1) {
					that.deilt_data = res.data
					that.deilt_data.vehicleUrl2 = that.deilt_data.vehicleUrl.split(',')
					for (let i = 0; i < that.deilt_data.vehicleUrl2.length; i++) {
						that.deilt_data.vehicleUrl2[i] = 'https://cba360.com' + that.deilt_data.vehicleUrl2[
							i]
					}


					let dates = [];
					let currentDate = new Date();

					for (let i = 0; i < 32; i++) {
						let year = currentDate.getFullYear();
						let month = currentDate.getMonth() + 1; // 月份加 1
						let day = currentDate.getDate();

						let dateStr =
							`${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
						dates.push(dateStr);

						currentDate.setDate(currentDate.getDate() + 1); // 增加一天
					}



					if (that.deilt_data.periodDate) {
						that.deilt_data.periodDate2 = that.deilt_data.periodDate.split(",")

						that.deilt_data.periodDate3 = dates.filter(element => !that.deilt_data.periodDate2
							.includes(element));


					} else {
						that.deilt_data.periodDate2 = []
						that.deilt_data.periodDate3 = dates
					}
					that.urls = that.deilt_data.vehicleUrl2








				} else {
					return uni.showToast({
						title: res.data.msg,
						icon: "none",
						duration: 1000
					})
				}
			})
		},
		mounted() {




		},
		methods: {
			phone_btn(e) {
				uni.makePhoneCall({
					phoneNumber: e,
				});
			},
			previewImage() {
				uni.previewImage({
					// 需要预览的图片链接列表
					urls: [],
					// 为当前显示图片的链接/索引值
					current: 'https://cba360.com/' + user_info.value.personalQrcodeUrl,
					// 图片指示器样式	
					indicator: 'default',
					// 是否可循环预览
					loop: false,
					// 长按图片显示操作菜单，如不填默认为保存相册
					// longPressActions:{
					// 	itemList:[this.l('发送给朋友'),this.l]
					// },
					success: res => {
						console.log('res', res);
					},
					fail: err => {
						console.log('err', err);
					}
				});
			},
			car_btn() {
				this.car_off = true
			},
			car_close() {
				this.car_off = false
			},
			go_car_btn() {
				let that = this
				uni.navigateToMiniProgram({
					appId: 'wx7c0c100ebfaf705a',
					path: 'pages/tabbar/my/become_a_team/become_a_team?userId=' + that.userId,
					// extraData: {
					//    'miniType': '0'
					// },
					success(res) {
						// 打开成功
					}
				})
			},
			go_adupTravelAdviceFollow() {
				let that = this
				that.car_off = false
				uni.navigateToMiniProgram({
					appId: 'wx7c0c100ebfaf705a',
					path: 'pages/common/index/index?userId=' + that.userId + '&num=1',

					success(res) {

					}
				})

			},
			go_order() {
				let that = this
				that.car_off = false
				uni.navigateToMiniProgram({
					appId: 'wx7c0c100ebfaf705a',
					path: 'pages/common/index/index?userId=' + that.userId + '&num=2',

					success(res) {

					}
				})
			},
			recognition_off_btn() {
				let that = this
				uni.redirectTo({
					url: '/my-man/my_car/my_car?companyNum=' + that.companyNum + '&userId=' + that.userId,
				});
			},
			go_tuanqi(e) {
				this.tuanqi_title = '查看团期'
				if (e) {
					this.defaultDate_list = e
				} else {
					this.defaultDate_list = []
				}
				this.$refs.wucalendar.open();
			},
			go_kongqi(e) {
				this.tuanqi_title = '查看空期'
				if (e) {
					this.defaultDate_list = e
				} else {
					this.defaultDate_list = []
				}
				this.$refs.wucalendar.open();
			},



		},





	}
</script>
<style lang="scss">
	.content_data {
		width: 95%;
		background-color: #fff;
		margin: auto;
		height: 95vh;
		border-radius: 12rpx;
		padding: 20rpx 40rpx;
		overflow: auto;
	}



	.recognition_css {
		z-index: 8888;
		font-weight: 700;
		font-size: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		flex-direction: column;
		top: 80vh;
		right: 10rpx;
		border-radius: 50%;
		width: 120rpx;
		height: 120rpx;
		background-color: #41a863;
		position: fixed;
		color: #ffffff
	}
</style>